<template>
  <div>
    <el-dialog
      :title="titlecom"
      :visible.sync="dialogFormVisible"
      width="400px"
    >
      <!-- :rules="rules" -->
      <el-form :model="form" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="是否推荐"
          :label-width="formLabelWidth"
          prop="recommend"
        >
          <el-select v-model="form.recommend" placeholder="请选择">
            <el-option
              v-for="a in reqCategory2"
              :key="a.id"
              :label="a.name"
              :value="a.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="quedingtianjia()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addservetypeadd, recommedservetj, getservetypes } from "@/api/server";
import { upload } from "@/api/editor.js";
import EditorBar from "@/components/Editor";
import draggable from "vuedraggable";
export default {
  components: {
    EditorBar,
    draggable,
  },
  data() {
    return {
      parameter: [{ price: "", name: "", title: "" }],
      isClear: false,
      dialogVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {
        recommend: "",
      },
      imgList: [],
      dialogImageUrl: "",
      dialogVisible1: false,
      rules: {
        recommend: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      qubie: 0,
      reqCategory1: [],
      reqCategory2: [
        { id: 1, name: "正常" },
        { id: 2, name: "推荐" },
      ],
    };
  },
  methods: {
    add() {
      this.form = {
        recommend: "",
      };

      this.qubie = 0;
      this.dialogFormVisible = true;
      this.imgList = [];
    },
    edit(val) {
      this.form = {
        recommend: "",
      };

      this.qubie = 1;
      this.form = Object.assign(this.form, val);
      this.dialogFormVisible = true;
    },
    // 关闭
    handleClose() {
      this.dialogFormVisible = false;
      this.$emit("refresh");
    },

    async quedingtianjia() {
      if (this.qubie == 0) {
      } else if (this.qubie == 1) {
        let param = {
          id: parseInt(this.form.id),
          recommend: parseInt(this.form.recommend),
        };
        let result = await recommedservetj(param);
        if (result.code == 0) {
          this.$message({
            message: `服务推荐状态修改成功`,
            type: "success",
          });
          this.handleClose();
        }
      }
    },
  },

  computed: {
    titlecom() {
      if (this.qubie == 0) {
        return "服务是否推荐";
      } else {
        return "服务是否推荐";
      }
    },
  },
};
</script>

<style scoped lang="scss">
.specificationInput {
  width: 250px;
}
.avatar-uploader-icon[data-v-22a48a68] {
  border: 1px dashed #d9d9d9;
  width: 148px;
  height: 148px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 148px;
  height: 148px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.specificationInput {
  width: 250px;
}

.addguigeBtn {
  margin-left: 100px;
  margin-bottom: 22px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}

.avatar {
  width: 180px;
  height: 180px;
  display: block;
}
v-deep .el-upload--picture-card {
  width: 200px !important;
  height: 200px !important;
}
.specificationInput1 {
  width: 150px;
}
</style>
